<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="id">
        <p>欢迎光临臭春水果店</p>
        <h3>苹果10元/斤，折扣8折</h3>
        <p>请输入要购买的斤数
            <input type="number" v-model.number="num">
        </p>
        <button @click="end">结账</button>
        <p>总价{{totalPrice}}元,折后价格{{totalPrice*0.8}}元,省了{{ totalPrice*0.2 }}元</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#id',
            data: {
               num:0,
               totalPrice:0,
            },
            methods:{
                end(){
                    this.totalPrice = parseInt(this.num.toFixed(2)*100)/10
                }
            }
            
        })

    </script>
</body>

</html>